<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户信息新增</title>
<!--引入bootstrap样式文件--->
<link rel="stylesheet" type="text/css"
	href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />

<link
	href="static/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" media="screen">
	<!-- 引入分页插件 -->
<link rel="stylesheet" type="text/css"
	href="static/paginationjs-master-2.1.0/dist/pagination.css" />
<style>
body {
	margin: 0px;
	padding: 0px;
}

#mainBody {
	width: 95%;
	margin: 0px auto;
}
</style>
<!--引入jquery-->
<script type="text/javascript"
	src="static/js/jquery-1.12.4/jquery-1.12.4.min.js"></script>
<!--引入bootstrap脚本--->
<script type="text/javascript"
	src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 引入分页插件 -->
<script type="text/javascript"
	src="static/paginationjs-master-2.1.0/dist/pagination.min.js"></script>
<script type="text/javascript">
	// 使用jquery进行ajax RESTFul post请求处理
	
	function doRESTFul_put() {
		// 创建一个dom的formdata对象，并设置该对象的enctype属性为multipart/form-data
		// 将from数据提出来，放入到fromdata对象中，使用fromdata对象作为ajax发送的数据对象
		var formData = new FormData($( "#form1" )[0]);
		// 设置fromdata对象的enctype属性为multipart/form-data
		formData.enctype = "multipart/form-data";
		/**
		注意：
		使用jquery的ajax想springmvc框架的action发送的ajax请求中如果有流对象，则要求做一下处理：
		（1） 使用dom的fromdata对象打包from表单，并设置fromdata对象的enctype属性为multipart/form-data；
		（2）设置jquery的ajax请求的一下两个属性为false:
			contentType: false,
			processData: false, 
		（3）springmvc框架后台的action响应方法的实体类参数不需要使用@RequestBody进行修饰，springmvc框架
			会自动对含有multipart/form-data请求进行数据类型转换。（自动将form表单数据映射为实体类）
		**/
		// 使用jquery进行ajax请求处理
		$.ajax({
			type : "POST", // 请求类型
			url : "adminInfo/", // 请求的url
			//data : $("#form1").serialize(), // 发送的数据 使用serialize方法替代手动拼写数据串
			data : formData,
			dataType : "json", // 响应发挥的数据类型	
			//contentType:"multipart/form-data", // form表单发送服务器时打包时的类型，包含文件流
			// 两个属性为false
			contentType: false,
			processData: false, 
			success : function(data, textStatus, jqXHR) { // 执行成功之后的回调函数
				// 回调函数的dom操作

				// 解析json数据
				console.info(data);

				// 将ajax查询的结果进行分页处理
				doPaging(data, 5);
				/*
				 注意，如果返回数据为文本类型，需要将json字符串转为json对象
				each函数解析的是json对象，而不是json字符串
				 */

			},
			error : function(data) {
				alert("请求失败" + data);
			}
		});
	}

	// 分页处理--处理lsit类型的结果集
	function doPaging(data, pagesize) {

		if (isNaN(pagesize) || pagesize <= 0) {
			pagesize = 5; // 默认页面大小为5条记录
		}
		console.info("pagesize:" + pagesize);
		// 获取显示分页控件的div
		$('#querypager')
				.pagination(
						{
							dataSource : data, // 分页的数据源（可以是ajax查询成功之后的json数据对象）
							pageSize : pagesize,// 每页显示的记录条数
							showGoInput : true, // 是否显示goin按钮
							showGoButton : true,
							callback : function(data, pagination) {
								console.info(pagination);
								// 分页处理
								// 解析拼写的html内容
								var strHtml = "";
								$
										.each(
												data,
												function(index, eachVal) {
													strHtml += "<tr>";

													strHtml += "<th scope='row'>";
													strHtml += (index + 1);
													strHtml += "</th>";

													strHtml += "<td>";
													strHtml += eachVal.adminname;
													strHtml += "</td>";

													strHtml += "<td>";
													strHtml += eachVal.adminaddress;
													strHtml += "</td>";

													strHtml += "<td>";
													strHtml += eachVal.admintel;
													strHtml += "</td>";

													strHtml += "<td>";
													strHtml += "<img src='";
					strHtml+=eachVal.adminimg;					
					strHtml+="' width='30px' height='30px'/>";
													strHtml += "</td>";

													strHtml += "</tr>";
												});

								// 把解析的html内容，使用dom操作赋值到表格中
								$("#displaytbody").html(strHtml);
							}
						})
	}
</script>

</head>
<body>
	<div id="mainBody">

		<form id="form1" class="form-horizontal" enctype="multipart/form-data">
			<div class="form-group" style="margin-top: 10px;">
				<label class="col-sm-2 control-label">姓名</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="adminname"
						name="adminname" placeholder="请输入用户名">
				</div>

				<label class="col-sm-2 control-label">地址</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="adminaddress"
						name="adminaddress" placeholder="请输入地址">
				</div>

			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">密码</label>
				<div class="col-sm-3">
					<input type="password" class="form-control" id="adminpsw"
						name="adminpsw" placeholder="请输入密码">
				</div>

				<label class="col-sm-2 control-label">确认密码</label>
				<div class="col-sm-3">
					<input type="password" class="form-control" id="adminpsw2"
						name="adminpsw2" placeholder="请输入密码">
				</div>


			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">电话</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="admintel"
						name="admintel" placeholder="请输入联系电话">
				</div>


				<label class="col-sm-2 control-label">注册日期</label>
				<div class="col-sm-3">
					<input type="date" class="form-control" id="regdate" name="regdate"
						placeholder="请输入联系电话">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">头像</label>
				<div class="col-sm-3">
					<!-- 因为springmvc框架中，文件流对象，需要单独进行映射，不能直接映射给实体类；
				所有，文件表单控件name属性按一下规范命名：前缀_实体类属性名；
				例如：file_adminimg（注意file_在文件上传时是固定的） 
				目的：防止文件流对象内容直接映射给实体类的属性-->
					<input type="file" class="form-control" id="adminimg"
						name="file_adminimg">
				</div>
			</div>
		</form>
		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
				<button type="button" onclick="doRESTFul_put()"
					class="btn btn-default">保存</button>
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-7">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>地址</th>
							<th>手机</th>
							<th>头像</th>
						</tr>
					</thead>
					<tbody id="displaytbody">

					</tbody>
				</table>
			</div>
			<div class="col-sm-offset-2 col-sm-7">
				<div class="inner-left preview" id="querypager"></div>
			</div>
		</div>

	</div>
</body>
</html>